<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-08 11:44:09
 * @Description: 
 * @FilePath: \hmcs_map\src\views\spone\frontPage\yong\yong.vue
-->
<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'用-废水再生,循环利用'"
      :secondTitles="[
        '雨水资源利用率',
        '污水再生利用率',
        '再生水资源用途',
      ]"
      :slotWidth="[28,36,36]"
    >
      <template #left>
           <yong1
           :selectValue="left_value"
           :echartsData="echartsData1" v-if="echartsData1"
           ></yong1>

      </template>
      <template #middle>
        <yong2
        :selectValue="middle_value":echartsData="echartsData2" v-if="echartsData2"
        ></yong2>

      </template>
    
      <template #right >
        <div class="w-100 h-100">
        <zs_szy
        v-if="szyData"
        :szyData="szyData"
        :selectValue="right_value"
        
        ></zs_szy>
         </div>
      </template>
      <template #left_control>
            <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
             v-model:select-value="left_value"
            :width="150"
            > </proSelect>
        </template>
        <template #middle_control>
            <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
             v-model:select-value="middle_value"
            :width="150"
            > </proSelect>
        </template>
        <template #right_control>
            <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
             v-model:select-value="right_value"
            :width="150"
            > </proSelect>
        </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import yong1 from './yong1.vue'
import yong2 from './yong2.vue'
import containTemplete from "@/components/project/containTemplete.vue";
import zs_szy from "./zs_szy.vue";
import { useFunc } from "@/hook/useFunc";
import { useOptions } from '@/hook/useOptions';
const left_value=ref()
const middle_value=ref()
const right_value=ref()
const szyData=ref()
const jsonData:any = inject('jsonData')
const echartsData1 = ref();
const echartsData2 = ref();
watch(
    () => jsonData.value,
    (newValue:any, oldValue) => {
      if (newValue) {
        echartsData1.value = newValue.jsc.yszylyl;
        echartsData2.value = newValue.jsc.wszslyl;
        szyData.value = newValue.jsc.zsszy
        
      }
    }
);
onMounted(() => {
// useFunc().getIndicatorDataInt("1").then((res:any) => {
//   szyData.value=res  
// });
// let data=useFunc().getIndicatorData("1")
// console.log(data,'sdw');
});
</script>

<style scoped lang="less">
.bk_left {
  height: 40%;
  width: 90%;
  background: url("../../../../assets/image/underGround/dwq.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 30px 0 40px 0;
  text-align: center;
}
.bk {
  background: url("../../../../assets/image/underGround/szy_bk1.png");
  background-size: 100% 100%;
  padding: 60px 0 40px 0;
  text-align: center;
}
.bk2 {
  background: url("../../../../assets/image/underGround/text_bk.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 35px 0 40px 30px;
}
.even-index {
  margin-left: 30px;
}
</style>
